<template>
  <stell-home-header />
  <div class="detail">
    <div class="detail-view">
      <header>
        <span class="level1" @click="handleClickTab('/steel-home')"
          >行业头条</span
        >

        <i class="iconfont icon-xiangyou"></i>

        <span class="level2">行业动态</span>
        <i class="iconfont icon-xiangyou"></i>
        <span class="level3">{{ detailData.title }}</span>
      </header>

      <div class="content-area">
        <div class="left-area">
          <div class="left-content">
            <header>
              <h3>
                {{ detailData.title }}
              </h3>
              <p class="second-level">
                <span class="time">{{ detailData.time }}</span> |
                <span class="tag"> 行业动态</span>
              </p>
            </header>
            <div class="content">
              <div v-for="(item, index) in detailData.content" :key="index">
                <div
                  v-if="isImageUrl(item)"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <img :src="item" alt="" srcset="" />
                </div>
                <div
                  v-else-if="isVideoLink(item)"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <video width="100%" controls>
                    <source :src="item" type="video/mp4" />
                  </video>
                </div>
                <div v-else v-html="item"></div>
              </div>
            </div>
          </div>
          <div class="next-page-area">
            <span class="next-label">{{
              index === newsList.length - 1 ? "上一篇" : "下一篇"
            }}</span>
            <span class="gap">|</span>
            <span>{{
              index === newsList.length - 1
                ? newsList[index - 1].title
                : newsList[index + 1].title
            }}</span>
          </div>
        </div>

        <div class="aside">
          <trends-list></trends-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import StellHomeHeader from "../components/header/index.vue";
import TrendsList from "../components/trends-list/index.vue";
import { useRouter, useRoute } from "vue-router";
import { imgUrl } from "@/utils/common";
import { newsList } from "../major/constants";
const router = useRouter();
const route = useRoute();
const handleClickTab = (item: any) => {
  router.push(item);
};
const detailData = ref({});
const index = ref(0);
onMounted(() => {
  index.value = newsList.findIndex((item: any) => item.id === route.query.id);
  detailData.value = newsList[index.value];
});
const isImageUrl = (url: string) => {
  const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "bmp"];
  const extension = url.split(".").pop().toLowerCase();
  return imageExtensions.includes(extension);
};
const isVideoLink = (url: string) => {
  const videoExtensions = [".mp4", ".webm", ".ogg", ".mov"];
  return videoExtensions.some((extension) =>
    url.toLowerCase().endsWith(extension)
  );
};
</script>
<style scoped lang="scss">
.detail {
  background: #f9f9f9;
}
.detail-view {
  width: 1280px;
  margin: 0 auto;

  header {
    padding: 24px 0;
    .level1,
    .level2 {
      font-size: 16px;
      color: #6b778c;
      cursor: pointer;
      &:hover {
        color: #1678ff;
      }
    }
    .level3 {
      font-size: 14px;
      color: #1678ff;
    }
  }
  .content-area {
    display: flex;
    justify-content: space-between;
    .left-area {
      display: flex;
      flex-direction: column;
    }
    .left-content {
      width: 940px;
      // height: 1625px;
      padding: 40px;
      border: 1px solid #dfe1e6;
      background: #fff;
      h3 {
        font-weight: 600;
        font-size: 24px;
        color: #172b4d;
      }
      .second-level {
        margin: 24px 0;
        font-size: 14px;
        color: #a5adba;
      }
      .content span {
        line-height: 32px;
      }
      .content img {
        margin: 12px 0;
      }
    }
    .next-page-area {
      padding: 40px 0 60px;
      .gap {
        padding: 0 16px;
      }
      .next-label {
        cursor: pointer;
        &:hover {
          color: #1678ff;
        }
      }
    }
  }
}
</style>
